<template>
  <div class="word-examples">
    <!-- 左右布局容器 -->
    <div class="layout-container">
      <!-- 左侧：汉字信息展示区 -->
      <div class="left-panel">
        <!-- 汉字信息 -->
        <div class="hanzi-info">
          <div class="current-hanzi">{{ currentHanzi }}<span class="pinyin-inline">（{{ hanziData[currentHanzi]?.pinyin || '未知' }}）</span></div>
        </div>

        <!-- 笔画练习区 -->
        <div class="stroke-practice-display">
          <!-- 练习状态 -->
          <div class="practice-status">
            <span v-if="!isPracticing">准备开始练习</span>
            <span v-else-if="currentStroke > 0">正在练习第 {{ currentStroke }} 笔</span>
            <span v-else>请开始书写</span>
          </div>

          <!-- 书写区域 -->
          <div class="writing-area">
            <div class="practice-hint">💡 提示：按照正确的笔顺分别书写两个字的词语</div>
            <div class="writing-container">
              <div class="writer-box">
                <div class="writer-label">第一个字</div>
                <div id="practice-writer-target-1" class="practice-writer"></div>
              </div>
              <div class="writer-box">
                <div class="writer-label">第二个字</div>
                <div id="practice-writer-target-2" class="practice-writer"></div>
              </div>
            </div>
            
            <!-- 练习控制按钮 -->
            <div class="practice-controls">
              <button 
                v-if="!isPracticing" 
                @click="startPractice" 
                class="btn btn-start"
              >
                🎯 开始练习
              </button>
              <button 
                v-else 
                @click="resetPractice" 
                class="btn btn-reset"
              >
                🔄 重新开始
              </button>
              <button @click="showStrokeOrder" class="btn btn-hint">
                📝 查看笔顺
              </button>
            </div>

            <!-- 练习统计 -->
            <div class="practice-stats" v-if="practiceStats.totalStrokes > 0">
              <div class="stat-item">
                <span class="stat-label">总笔画数：</span>
                <span class="stat-value">{{ practiceStats.totalStrokes }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">正确笔画：</span>
                <span class="stat-value correct">{{ practiceStats.correctStrokes }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">错误笔画：</span>
                <span class="stat-value wrong">{{ practiceStats.wrongStrokes }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧：组词选择区 -->
      <div class="right-panel">
        <div class="hanzi-selector">
          <h3>选择汉字查看组词</h3>
          
          <!-- 搜索框 -->
          <div class="search-container">
            <input 
              v-model="searchText" 
              @input="handleSearch"
              placeholder="搜索汉字或拼音..." 
              class="search-input"
            />
          </div>
          
          <!-- 年级筛选 -->
          <div class="grade-filter">
            <label>年级筛选：</label>
            <select v-model="selectedGrade" @change="handleGradeChange" class="grade-select">
              <option value="">全部</option>
              <option v-for="grade in grades" :key="grade" :value="grade">{{ grade }}</option>
            </select>
          </div>
          
          <!-- 汉字按钮区域 -->
          <div class="hanzi-buttons">
            <button 
              v-for="item in paginatedHanziList" 
              :key="item.hanzi"
              :class="{ active: currentHanzi === item.hanzi }"
              @click="changeHanzi(item.hanzi)"
              @dblclick="showWordDetail(item.words)"
              class="hanzi-btn"
            >
              {{ item.words }}
            </button>
          </div>
          
          <!-- 分页控件 -->
          <div class="pagination">
            <button 
              @click="prevPage" 
              :disabled="currentPage === 1"
              class="page-btn"
            >
              ◀
            </button>
            <span class="page-info">
              第 {{ currentPage }} 页 / 共 {{ totalPages }} 页
              ({{ filteredHanziList.length }} 个汉字)
            </span>
            <button 
              @click="nextPage" 
              :disabled="currentPage === totalPages"
              class="page-btn"
            >
              ▶
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 词语详情弹窗 -->
    <div v-if="selectedWord" class="word-detail-modal" @click="closeModal">
      <div class="modal-content" @click.stop>
        <button class="close-btn" @click="closeModal">×</button>
        <h3>{{ selectedWord }}</h3>
        <div class="word-detail">
          <div class="detail-item">
            <span class="detail-label">拼音：</span>
            <span class="detail-value">{{ getWordPinyin(selectedWord) }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">含义：</span>
            <span class="detail-value">{{ getWordMeaning(selectedWord) }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">例句：</span>
            <span class="detail-value">{{ getWordExample(selectedWord) }}</span>
          </div>
        </div>
        <button class="practice-btn" @click="practiceWord(selectedWord)">
          ✏️ 练习这个词语
        </button>
      </div>
    </div>

    <!-- Toast弹窗 -->
    <div v-if="showToast" class="toast-container">
      <div :class="['toast', 'toast-' + toastType]">
        <div class="toast-icon">
          <span v-if="toastType === 'success'">✅</span>
          <span v-else-if="toastType === 'error'">❌</span>
          <span v-else>⚠️</span>
        </div>
        <div class="toast-content">
          <div class="toast-message">{{ toastMessage }}</div>
        </div>
        <button class="toast-close" @click="showToast = false">×</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from "vue";
import HanziWriter from "hanzi-writer";
import { resolveResource } from '@tauri-apps/api/path';
import { readTextFile } from '@tauri-apps/plugin-fs';

// 汉字数据类型定义
interface HanziData {
  pinyin: string;
  meaning: string;
  words: string;
}

// 响应式数据
const allHanziData = ref<Array<{grade: string, hanzi: string, pinyin: string, words: string}>>([]);
const hanziData = ref<Record<string, HanziData>>({});
const searchText = ref("");
const selectedGrade = ref("");
const currentPage = ref(1);
const pageSize = ref(12); // 每页显示12个汉字

const currentHanzi = ref("人");
const selectedWord = ref("");

// 笔画练习相关数据
const writer1 = ref<HanziWriter | null>(null);
const writer2 = ref<HanziWriter | null>(null);
const isPracticing = ref(false);
const showHint = ref(true);
const currentStroke = ref(0);
const showToast = ref(false);
const toastMessage = ref('');
const toastType = ref('success'); // success, error, warning
const practiceStats = ref({
  totalStrokes: 0,
  correctStrokes: 0,
  wrongStrokes: 0
});

// 计算属性
const grades = computed(() => {
  const gradeSet = new Set(allHanziData.value.map(item => item.grade));
  const gradeOrder = ["一年级", "二年级", "三年级", "四年级", "五年级", "六年级"];
  return Array.from(gradeSet).sort((a, b) => {
    return gradeOrder.indexOf(a) - gradeOrder.indexOf(b);
  });
});

// 过滤后的汉字列表
const filteredHanziList = computed(() => {
  let filtered = allHanziData.value;
  
  // 年级筛选
  if (selectedGrade.value) {
    filtered = filtered.filter(item => item.grade === selectedGrade.value);
  }
  
  // 搜索筛选
  if (searchText.value.trim()) {
    const searchLower = searchText.value.toLowerCase().trim();
    filtered = filtered.filter(item => 
      item.hanzi.includes(searchLower) || 
      item.pinyin.toLowerCase().includes(searchLower)
    );
  }
  
  return filtered;
});

// 分页相关计算属性
const totalPages = computed(() => Math.ceil(filteredHanziList.value.length / pageSize.value));
const paginatedHanziList = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize.value;
  const endIndex = startIndex + pageSize.value;
  return filteredHanziList.value.slice(startIndex, endIndex);
});

// 加载CSV数据
const loadCSVData = async () => {
  try {
    const resourcePath = await resolveResource('data/primary_school_chinese.csv');
    const csvText = await readTextFile(resourcePath);
    
    // 解析CSV数据
    const lines = csvText.split('\n').slice(1); // 跳过标题行
    const data = [];
    
    for (const line of lines) {
      if (line.trim()) {
        const [grade, hanzi, pinyin, words] = line.split(',');
        if (hanzi && pinyin) {
          data.push({
            grade: grade.trim(),
            hanzi: hanzi.trim(),
            pinyin: pinyin.trim(),
            words: words ? words.trim() : ""
          });
        }
      }
    }
    
    allHanziData.value = data;
    
    // 构建hanziData对象
    const hanziMap: Record<string, HanziData> = {};
    data.forEach(item => {
      const wordList = item.words
      hanziMap[item.hanzi] = {
        pinyin: item.pinyin,
        meaning: `${item.hanzi}，${getDefaultMeaning(item.hanzi)}`,
        words: wordList
      };
    });
    
    hanziData.value = hanziMap;
    
  } catch (error) {
    console.error('加载CSV数据失败:', error);
  }
};

// 获取默认含义
const getDefaultMeaning = (hanzi: string) => {
  const meanings: Record<string, string> = {
    "人": "人类，人物",
    "口": "嘴巴，出入口",
    "日": "太阳，日子",
    "月": "月亮，月份",
    "水": "液体，水流"
  };
  return meanings[hanzi] || "常用汉字";
};

// 搜索处理
const handleSearch = () => {
  currentPage.value = 1; // 搜索时重置到第一页
};

// 年级筛选处理
const handleGradeChange = () => {
  currentPage.value = 1; // 筛选时重置到第一页
};

// 分页处理
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
  }
};

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
  }
};

// 词语详情类型定义
interface WordDetail {
  pinyin: string;
  meaning: string;
  example: string;
}

// 词语详情数据
const wordDetails: Record<string, WordDetail> = {
  "人民": {
    pinyin: "rén mín",
    meaning: "广大人民群众",
    example: "中国人民勤劳勇敢。"
  },
  "人类": {
    pinyin: "rén lèi",
    meaning: "人的总称",
    example: "人类是地球上最聪明的生物。"
  },
  "人口": {
    pinyin: "rén kǒu",
    meaning: "居住在一定区域内的人的总数",
    example: "中国是世界上人口最多的国家。"
  },
  "门口": {
    pinyin: "mén kǒu",
    meaning: "门的出入口",
    example: "小狗在门口等着主人回家。"
  },
  "日子": {
    pinyin: "rì zi",
    meaning: "时间，生活",
    example: "现在的日子过得真快。"
  },
  "月亮": {
    pinyin: "yuè liang",
    meaning: "月球的俗称",
    example: "今晚的月亮真圆。"
  },
  "水果": {
    pinyin: "shuǐ guǒ",
    meaning: "可以生吃的植物果实",
    example: "多吃水果对身体好。"
  }
};

const getWordPinyin = (word: string) => {
  return wordDetails[word]?.pinyin || "-";
};

const getWordMeaning = (word: string) => {
  return wordDetails[word]?.meaning || "-";
};

const getWordExample = (word: string) => {
  return wordDetails[word]?.example || "-";
};

const showWordDetail = (word: string) => {
  selectedWord.value = word;
};

const closeModal = () => {
  selectedWord.value = "";
};

// 显示toast消息
const showToastMessage = (message: string, type: string = 'success') => {
  toastMessage.value = message;
  toastType.value = type;
  showToast.value = true;
  
  // 3秒后自动隐藏
  setTimeout(() => {
    showToast.value = false;
  }, 3000);
};

const practiceWord = (word: string) => {
  // 可以跳转到练习页面，这里先关闭弹窗
  closeModal();
  // 在实际应用中，可以跳转到专门的词语练习页面
  alert(`开始练习词语：${word}`);
};

// 笔画练习相关函数
const startPractice = () => {
  if (!writer1.value || !writer2.value) {
    initWriter();
  }
  
  if (writer1.value && writer2.value) {
    isPracticing.value = true;
    currentStroke.value = 0;
    practiceStats.value = {
      totalStrokes: 0,
      correctStrokes: 0,
      wrongStrokes: 0
    };
    
    // 开始第一个字的练习
    writer1.value.quiz({
      onComplete: () => {
        // 第一个字完成后开始第二个字的练习
        writer2.value?.quiz({
          onComplete: () => {
            isPracticing.value = false;
            showToastMessage('🎉 练习完成！', 'success');
          }
      });
      }
    });
  }
};

const resetPractice = () => {
  if (writer1.value) {
    writer1.value.cancelQuiz();
  }
  if (writer2.value) {
    writer2.value.cancelQuiz();
  }
  isPracticing.value = false;
  currentStroke.value = 0;
  practiceStats.value = {
    totalStrokes: 0,
    correctStrokes: 0,
    wrongStrokes: 0
  };
  if (writer1.value) {
    writer1.value.hideCharacter();
  }
  if (writer2.value) {
    writer2.value.hideCharacter();
  }
};

const showStrokeOrder = () => {
  if (writer1.value && writer2.value) {
    // 先重置两个书写器
    writer1.value.hideCharacter();
    writer2.value.hideCharacter();
    
    // 播放第一个字的笔顺动画
    writer1.value.animateCharacter({
      onComplete: () => {
        // 第一个字完成后播放第二个字的笔顺动画
        writer2.value?.animateCharacter({
          onComplete: () => {
            // 动画完成后显示提示
            showHint.value = false;
            setTimeout(() => {
              showHint.value = true;
            }, 3000);
          }
        });
      }
    });
  } else if (writer1.value) {
    // 如果只有一个字，只播放第一个字的笔顺动画
    writer1.value.hideCharacter();
    writer1.value.animateCharacter({
      onComplete: () => {
        showHint.value = false;
        setTimeout(() => {
          showHint.value = true;
        }, 3000);
      }
    });
  }
};

const initWriter = () => {
  const targetElement1 = document.getElementById('practice-writer-target-1');
  const targetElement2 = document.getElementById('practice-writer-target-2');
  
  if (targetElement1 && targetElement2) {
    // 获取当前汉字的两个字组词
    const currentWords = hanziData.value[currentHanzi.value]?.words || "";
    const practiceText = currentWords.length >= 2 ? currentWords.substring(0, 2) : currentHanzi.value;
    
    // 清理之前的书写器并清除画布内容
    if (writer1.value) {
      writer1.value.cancelQuiz();
      writer1.value.hideCharacter();
      writer1.value = null;
    }
    if (writer2.value) {
      writer2.value.cancelQuiz();
      writer2.value.hideCharacter();
      writer2.value = null;
    }
    
    // 清除画布内容
    targetElement1.innerHTML = '';
    targetElement2.innerHTML = '';
    
    // 创建第一个字的书写器
    writer1.value = HanziWriter.create(targetElement1, practiceText[0], {
      width: 200,
      height: 200,
      padding: 5,
      showOutline: true,
      strokeColor: '#ff6b6b',
      radicalColor: '#4ecdc4',
      delayBetweenStrokes: 200,
      strokeAnimationSpeed: 2,
      charDataLoader: async function(char, onComplete) {
        // 从本地文件获取JSON数据
        const resourcePath = await resolveResource(`json/${char}.json`);
        const jsonText = await readTextFile(resourcePath);
        const characterData = JSON.parse(jsonText);
        onComplete(characterData);
        return characterData;
      }
    });
    
    // 创建第二个字的书写器（只有当词语有两个字时才创建）
    if (practiceText.length >= 2) {
      writer2.value = HanziWriter.create(targetElement2, practiceText[1], {
        width: 200,
        height: 200,
        padding: 5,
        showOutline: true,
        strokeColor: '#ff6b6b',
        radicalColor: '#4ecdc4',
        delayBetweenStrokes: 200,
        strokeAnimationSpeed: 2,
        charDataLoader: async function(char, onComplete) {
          // 从本地文件获取JSON数据
          const resourcePath = await resolveResource(`json/${char}.json`);
          const jsonText = await readTextFile(resourcePath);
          const characterData = JSON.parse(jsonText);
          onComplete(characterData);
          return characterData;
        }
      });
    } else {
      // 如果只有一个字，隐藏第二个书写器区域
      targetElement2.style.display = 'none';
    }
  }
};

// 当汉字改变时重新初始化书写器
const changeHanzi = (hanzi: string) => {
  currentHanzi.value = hanzi;
  
  // 重置练习状态
  isPracticing.value = false;
  currentStroke.value = 0;
  practiceStats.value = {
    totalStrokes: 0,
    correctStrokes: 0,
    wrongStrokes: 0
  };
  
  // 确保第二个书写器区域可见
  const targetElement2 = document.getElementById('practice-writer-target-2');
  if (targetElement2) {
    targetElement2.style.display = 'block';
  }
  
  // 延迟初始化，确保DOM已更新
  setTimeout(() => {
    initWriter();
  }, 100);
};

// 组件挂载时加载数据
onMounted(async () => {
  await loadCSVData();
  // 延迟初始化书写器
  setTimeout(() => {
    initWriter();
  }, 500);
});

// 组件卸载时清理
onUnmounted(() => {
  if (writer1.value) {
    writer1.value.cancelQuiz();
  }
  if (writer2.value) {
    writer2.value.cancelQuiz();
  }
});
</script>

<style scoped>
.word-examples {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  height: 100%;
  min-height: 500px;
}

.examples-header {
  text-align: center;
  margin-bottom: 30px;
}

.examples-header h2 {
  font-size: 2.5rem;
  color: #ff6b6b;
  margin-bottom: 10px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.examples-header p {
  font-size: 1.1rem;
  color: #666;
}

/* 左右布局容器 */
.layout-container {
  display: flex;
  gap: 20px;
  height: calc(100% - 100px);
}

/* 左侧面板 */
.left-panel {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 汉字信息 */
.hanzi-info {
  background: white;
  padding: 10px;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
  flex: 1;
}

.current-hanzi {
  font-size: 4rem;
  color: #ff6b6b;
  margin-bottom: 10px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.pinyin-inline {
  font-size: 2rem;
  color: #4ecdc4;
  margin-left: 10px;
  vertical-align: middle;
}

.pinyin {
  font-size: 1.3rem;
  color: #4ecdc4;
  margin-bottom: 5px;
}

.meaning {
  font-size: 1.1rem;
  color: #666;
}

/* 笔画练习区 */
.stroke-practice-display {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.practice-status {
  text-align: center;
  font-size: 1.2rem;
  color: #4ecdc4;
  margin-bottom: 20px;
  font-weight: bold;
}

.writing-area h4 {
  color: #ff6b6b;
  margin-bottom: 15px;
  text-align: center;
  font-size: 1.3rem;
}

.practice-hint {
  text-align: center;
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 20px;
  background: #f8f9fa;
  padding: 10px;
  border-radius: 8px;
  border-left: 4px solid #4ecdc4;
}

.writing-container {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: 15px 0;
}

.writer-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.writer-label {
  margin-bottom: 15px;
  font-size: 16px;
  color: #ff6b6b;
  font-weight: bold;
}

.practice-writer {
  width: 200px;
  height: 200px;
  border: 3px dashed #ffd166;
  border-radius: 15px;
  background: #fffaf0;
  padding: 10px;
}

.practice-controls {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.btn-start {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
  color: white;
}

.btn-start:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-reset {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  color: #666;
}

.btn-reset:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-hint {
  background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
  color: white;
}

.btn-hint:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.practice-stats {
  display: flex;
  justify-content: center;
  gap: 30px;
  background: #f8f9fa;
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #e9ecef;
}

.stat-item {
  text-align: center;
}

.stat-label {
  display: block;
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 5px;
}

.stat-value {
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
  color: #4ecdc4;
}

.stat-value.correct {
  color: #28a745;
}

.stat-value.wrong {
  color: #dc3545;
}

/* 右侧面板 */
.right-panel {
  flex: 1;
  min-width: 300px;
}

.hanzi-selector {
  background: white;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  height: 100%;
  box-sizing: border-box;
}

.hanzi-selector h3 {
  color: #ff6b6b;
  margin-bottom: 15px;
  text-align: center;
  font-size: 1.3rem;
}

/* 搜索和筛选样式 */
.search-container {
  margin-bottom: 15px;
}

.search-input {
  width: 90%;
  padding: 10px 15px;
  border: 2px solid #e0f7fa;
  border-radius: 25px;
  font-size: 0.9rem;
  outline: none;
  transition: all 0.3s ease;
  background: #f8fdff;
}

.search-input:focus {
  border-color: #4ecdc4;
  box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.1);
}

.grade-filter {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.grade-filter label {
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
}

.grade-select {
  padding: 8px 12px;
  border: 2px solid #e0f7fa;
  border-radius: 20px;
  font-size: 0.9rem;
  outline: none;
  background: #f8fdff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.grade-select:focus {
  border-color: #4ecdc4;
  box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.1);
}

/* 汉字按钮中的拼音样式 */
.hanzi-info-small {
  display: block;
  font-size: 0.7rem;
  color: #666;
  margin-top: 5px;
  font-weight: normal;
}

/* 分页控件样式 */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}

.page-btn {
  padding: 8px 12px;
  border: 2px solid #e0f7fa;
  border-radius: 20px;
  background: #f8fdff;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
  color: #4ecdc4;
}

.page-btn:hover:not(:disabled) {
  background: #4ecdc4;
  color: white;
  transform: translateY(-1px);
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.page-info {
  font-size: 0.9rem;
  color: #666;
  text-align: center;
  min-width: 180px;
}

.hanzi-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.hanzi-btn {
  padding: 15px;
  font-size: 1.6rem;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  min-height: 60px;
}

.hanzi-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.hanzi-btn.active {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
  color: white;
  transform: scale(1.05);
}

/* 词语详情弹窗样式 */
.word-detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  max-width: 500px;
  width: 90%;
  position: relative;
}

.close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
}

.close-btn:hover {
  color: #ff6b6b;
}

.modal-content h3 {
  color: #ff6b6b;
  margin-bottom: 20px;
  text-align: center;
  font-size: 1.8rem;
}

.word-detail {
  margin-bottom: 20px;
}

.detail-item {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
}

.detail-label {
  font-weight: bold;
  color: #666;
  min-width: 60px;
}

.detail-value {
  color: #333;
  flex: 1;
}

.practice-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
  border: none;
  border-radius: 25px;
  color: white;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.practice-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .word-examples {
    padding: 15px;
  }
  
  .layout-container {
    flex-direction: column;
    height: auto;
    gap: 20px;
  }
  
  .right-panel {
    min-width: auto;
  }
  
  .current-hanzi {
    font-size: 3rem;
  }
  
  .hanzi-buttons {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .hanzi-btn {
    padding: 15px;
    font-size: 1.5rem;
  }
  
  .practice-controls {
    flex-direction: column;
    align-items: center;
  }
  
  .grade-filter {
    flex-direction: column;
    align-items: stretch;
  }
  
  .pagination {
    flex-direction: column;
    gap: 10px;
  }
  
  .page-info {
    min-width: auto;
  }
}

/* Toast弹窗样式 */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2000;
  animation: toastSlideIn 0.5s ease-out;
}

.toast {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  min-width: 300px;
  max-width: 400px;
  animation: toastFadeIn 0.3s ease-out;
  position: relative;
  backdrop-filter: blur(10px);
}

.toast-success {
  background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
  color: white;
  border-left: 4px solid #28a745;
}

.toast-error {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
  color: white;
  border-left: 4px solid #dc3545;
}

.toast-warning {
  background: linear-gradient(135deg, #ffd166 0%, #ffb347 100%);
  color: #333;
  border-left: 4px solid #ffc107;
}

.toast-icon {
  font-size: 1.5rem;
  margin-right: 15px;
  flex-shrink: 0;
}

.toast-content {
  flex: 1;
  display: flex;
  align-items: center;
}

.toast-message {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}

.toast-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
  margin-left: 15px;
  flex-shrink: 0;
  transition: opacity 0.3s ease;
}

.toast-close:hover {
  opacity: 1;
}

@keyframes toastSlideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toastFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.toast-fade-out {
  animation: toastFadeOut 0.3s ease-in forwards;
}

@keyframes toastFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}
</style>